<%--
  Created by IntelliJ IDEA.
  User: fzr
  Date: 2020/7/22
  Time: 17:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
    <title>选票</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="../front/css/jquery.seat-charts.css">
    <link rel="stylesheet" type="text/css" href="../front/css/styles.css">
</head>
<body>
<div class="wrapper">
    <div class="container" >
        <div id="seat-map" style="width: 260px;">
            <div class="front-indicator" style="width: 190px;padding: 12px">电影屏幕</div>
        </div>
        <div class="booking-details" style=" margin-left: 405px;margin-top: -370px;font-size: 18px">
            <form id="checkout" >



                <h3>已选中的座位 (<span id="counter">0</span>):</h3>
                <ul id="selected-seats">
                </ul>
                <p>总价: <b>￥<span id="total">0</span></b></p>
                <p><button type="button" class="checkout-button" id="btn_submit" value="结算">结算</button> </p>
                <div id="legend"></div>

            </form>

        </div>
    </div>
</div>
<script src="../front/js/jquery-1.11.0.min.js"></script>
<script src="../front/js/jquery.seat-charts.min.js"></script>
<script>
    var firstSeatLabel = 1;
    $(document).ready(function () {

        var movieId = ${param.movieId};
        var userId = ${sessionScope.account.accountId};
        var cinemaId = ${param.cinemaId};
        var price = ${param.price};
        var hallId = ${param.hallId};
        var startTime=${param.startTime}

        var xAxis="";
        var yAxis="";
        var list =[];


        var seatId="";
        var $cart = $('#selected-seats'),
            $counter = $('#counter'),
            $total = $('#total'),
            sc = $('#seat-map').seatCharts({
                map:[
                    'eeeeeee',
                    'eeeeeee',
                    'eeeeeee',
                    'eefffee',
                    'eefffee',
                    'eefffee',
                    'eeeeeee',
                    'eeeeeee',
                    'eeeeeee',

                ],
                seats: {
                    f: {
                        price   : price,
                        classes : 'first-class', //your custom CSS class
                        category: '最佳观影区'
                    },
                    e: {
                        price   : price,
                        classes : 'economy-class', //your custom CSS class
                        category: '普通观影区'
                    }

                },
                naming : {
                    top : false,
                    getLabel : function (character, row, column) {
                        return column;
                    },
                },
                legend : {
                    node : $('#legend'),
                    items : [
                        [ 'f', 'available',   '最佳观影区' ],
                        [ 'e', 'available',   '普通观影区'],
                        [ 'f', 'unavailable', '已预定']
                    ]
                },
                click: function () {
                    if (this.status() == 'available') {



                        $('<li>'+this.data().category+(this.settings.row+1+"排")+this.settings.label+'号座位'+'：<br/>价格：<b>￥'+this.data().price+'</b> <a href="#" class="cancel-cart-item">[删除]</li>')
                            .attr('id','cart-item-'+this.settings.id)
                            .data('seatId', this.settings.id)
                            .appendTo($cart);
                        $counter.text(sc.find('selected').length+1);
                        $total.text(recalculateTotal(sc)+this.data().price);

                        xAxis=this.settings.row+1;

                        yAxis=(this.settings.label);

                        var a = {
                            xAxis:xAxis,
                            yAxis:yAxis
                        }

                        list.push(a);



                        return 'selected';
                    } else if (this.status() == 'selected') {
                        //update the counter
                        $counter.text(sc.find('selected').length-1);
                        //and total
                        $total.text(recalculateTotal(sc)-this.data().price);

                        //remove the item from our cart
                        $('#cart-item-'+this.settings.id).remove();

                        //seat has been vacated
                        return 'available';
                    } else if (this.status() == 'unavailable') {
                        //seat has been already booked
                        return 'unavailable';
                    } else {
                        return this.style();
                    }
                }
            });

       $("#btn_submit").click(function () {


           var arr = [];
          for (var i = 0 ;i <list.length;i++){
              arr.push(list[i].xAxis+"_"+list[i].yAxis);
              console.log(arr[i]);
              console.log(list[i]);
          }
             /*var acountprice=$("#total").text();*/






            $.ajax({
                async:true,
                type:"get",
                url:"${pageContext.request.contextPath}/getSeat/addOrder",

                data:{

                    movieId:movieId,
                    userId:userId,
                    cinemaId:cinemaId,
                    price:price,
                    seatId:arr,
                    hallId:hallId

                },
                dataType:"json",
                success:function(result){
                    console.log(result);
                    if (result==true){
                     window.location.href="payindex.jsp?price=price<%--${param.price}--%>";
                    }
                },
                error:function () {
                    alert("异步请求失败!");
                }

            });
        });
        //this will handle "[cancel]" link clicks
        $('#selected-seats').on('click', '.cancel-cart-item', function () {
            //let's just trigger Click event on the appropriate seat, so we don't have to repeat the logic here
            sc.get($(this).parents('li:first').data('seatId')).click();
        });
        //let's pretend some seats have already been booked

        $.ajax({
            async:true,
            url:"${pageContext.request.contextPath}/getSeat/findSeat",
            type:"GET",
            data:{
                hallId:hallId,
                cinemaId:cinmaId,
                movieId:movieId,
                startTime:startTime

            },
            dataType:"json",
            success:function(result){
                console.log(result);
                //拼接查询到的信息
                for (var i=0;i<result.length;i++){

                    sc.get([result[i].seatMessage]).status('unavailable');

                }
            },
            //请求失败时的响应函数
            error:function(){
                console.log("请求失败");
            }
        });

    });
    function recalculateTotal(sc) {
        var total = 0;
        //basically find every selected seat and sum its price
        sc.find('selected').each(function () {
            total += this.data().price;
        });
        return total;
    }



</script>
<div align="center" style="clear:both;font-size:12px;color:#666;font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>


